<template>
   <div>
     <!-- 无图 -->
     <div
     class="article-item van-hairline--bottom"
     @click="$router.push('/article?id=' + article.art_id)"
     >
    <p
      class="title van-multi-ellipsis--l2"
      :class="{ w66: article.cover.type === 1 }"
    >
      {{ article.title }}
    </p>
    <img
      v-for="(url, i) in article.cover.images"
      :key="i"
      class="img"
      :src="url"
      alt="加载失败"
    />

    <div class="info">
      <span>{{ article.aut_name }}</span>
      <span>{{ article.comm_count }}评论</span>
      <span>{{ article.pubdate | relativeTime }}</span>
      <van-icon  id="icon" name="close" @click="dialog"></van-icon>
    </div>
  </div>
   </div>
 </template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    article: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {}
  },
  methods: {
    dialog () {
      console.log(123)
    }
  }
}
</script>

 <style scoped lang="less">
 .article-item {
   padding: 15px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   .title {
     width: 100%;
     margin: 0;
     line-height: 22px;
     font-size: 16px;
     color: #333;
     margin-bottom: 8px;
     max-height: 44px;
     &.w66 {
       width: 66%;
     }
   }
   .img {
     width: 112px;
     height: 74px;
     border-radius: 4px;
     margin-bottom: 8px;
   }
   .info {
     width: 100%;
     color: #a5a6ab;
     font-size: 12px;
     position: relative;
     span {
       margin-right: 12px;
     }
     #icon{
      position: relative;
      float: right;
      font-size: 14px;
     }
   }
 }
 </style>
